<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动验证</title>
    <style>
        .drag-certify{
            width: 400px;
            height: 600px;
            position: relative;
            background-color: antiquewhite;
            margin: auto;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
           
        }
        .before{
            position: absolute;
            width: 400px;
            height: 50px;
            top: 50%;
            border-radius: 25px;
            background-color: cornsilk;
            z-index: 1;
           
        }
        .drag-btn{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            border-radius: 50%;
            background-color: #78e08f;
            left: 0;
            z-index: 999;
            
           
        }
        .after{
            position: absolute;
             top: 50%;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
            background-color: #c7ecee;
        }
    </style>
</head>
<body>
    
    <div class="drag-certify">
        <!-- 解锁前的背景 -->
        <div class="before">请向右滑动验证</div>
         <!-- 滑块 -->
        <div class="drag-btn">>>></div>
        <!-- 解锁后的背景 -->
        <div class="after"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
    <script >

 // init vConsole
 var vConsole = new VConsole();
        console.log('Hello world');
         // 做到极致
        // 获取元素
  let dragBtn =document.querySelector('.drag-btn')
  let beforeBox =document.querySelector('.before')
  let afterBox = document.querySelector('.after')
    // 创建变量 记录触摸开始时的坐标信息
   let startPos = {}
   let moveDistance={} // 记录滑动过程的移动距离 
   
   // 添加事件 监听刚触摸时
   dragBtn.addEventListener('touchstart',startFn,false)
   // 添加事件 监听触摸开始后
   dragBtn.addEventListener('touchmove',moveFn,false )
  // 添加事件  监听触摸完成后
   dragBtn.addEventListener('touchend',completeFn,false)
   // 封装函数 记录刚触摸是的坐标信息
   function startFn(e) {
       // 记录开始触摸点的X轴上的坐标
       startPos.x = e.changedTouches[0].pageX 
   }
  // 触摸滑动时
   function moveFn(e) {
    // 滑块的移动距离
    moveDistance.x = e.changedTouches[0].pageX - startPos.x
     // 滑块移动边界条件 
       if (moveDistance.x >= 350 || moveDistance.x < 0 ) return

        dragBtn.style.left= moveDistance.x+'px'
        afterBox.style.width= moveDistance.x +25+'px'
        afterBox.style.height = '50px'
        afterBox.style.zIndex = '2'   
   }
   // 触摸结束时
  function completeFn() {
     // 判滑块到解锁点和没滑到解锁点时
    if (moveDistance.x>=350) {
        // 滑块滑到解锁点  
        dragBtn.style.left = '350px'   
        dragBtn.innerText = '√'
        afterBox.innerText = '验证成功'
        afterBox.style.width= '375px'
        // 验证完成 移除事件监听
        dragBtn.removeEventListener('touchend',completeFn,false)
        dragBtn.removeEventListener('touchstart',startFn,false)
        dragBtn.removeEventListener('touchmove',moveFn,false)

    }else{
        //滑块没滑到解锁点 弹回最起点 覆盖层会消失
        dragBtn.style.left = 0
        afterBox.style.width= 0
        afterBox.style.height = 0
    }    
  }
    </script>
</body>
</html>